<template>
  <div class="ability-card flex-column">
    <!--    <div class="head lh-40 fz-14 pd-left-20 link-text">-->
    <!--      更新时间：{{ value.updateTime || value.createTime | dateTimeFormatter }}-->
    <!--    </div>-->
    <div class="body rela flex-sub">
      <img class="bg-img abso w-100P h-100P" :src="value.fileId | systemStaticImageFormat" alt="" />
      <div class="msg w-100P h-100P flex-column">
        <div class="name flex-sub justify-center align-center fz-30">{{ value.name }}</div>
        <div class="bottom-box justify-between align-center pd-left-20 pd-right-10 pd-bottom-14">
          <div class="task-num fz-14">绑定设备数：{{ value.deviceCount || 0 }}</div>
          <el-button plain @click.stop="handleNavTo">详情</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { OSS_STATIC_IMAGE_URL } from '@/consts'

export default {
  name: 'AbilityCard',
  filters: {
    systemStaticImageFormat(value) {
      if (!value) return ''
      return `${OSS_STATIC_IMAGE_URL}/${value}`
    },
  },
  props: {
    value: {
      type: Object,
      default: () => ({
        fileId: '',
        updateTime: '',
        createTime: '',
        name: '',
        id: '',
        taskCount: '',
      }),
    },
  },
  methods: {
    handleNavTo() {
      this.$router.push({ path: '/algorithm/ability-detail', query: { abilityId: this.value.id } })
    },
  },
}
</script>

<style scoped lang="scss">
.ability-card {
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 2px 2px 8px #999;

  .body {
    color: #fefefe;

    .bg-img {
      z-index: 0;
    }

    .msg {
      position: relative;
      z-index: 1;
      background-color: rgba(#1b84cd, 0.5);
      opacity: 1;

      //&:hover {
      //  opacity: 1;
      //}

      .bottom-box {
        ::v-deep .el-button {
          color: white;
          background-color: transparent;
          border-color: white;

          &:hover {
            border-color: white;
          }
        }
      }
    }
  }
}
</style>
